<template>
  <div class="seekclass">
    <titletop :titlename="titlename" :fixedhead="fixedhead"></titletop>
    <div class="seekclassin paddingtop">
      <div class="oneseek">
        <div v-for="(item,index) in oneclasslist" v-bind:class="{ active: index==selectItem }" v-on:click="showseek(item.list,index)"><div v-text="item.name"></div></div>
      </div>
      <div class="twoseek">
        <div v-for="item in seclasslist" v-on:click="godruglist(item.id)">
          <div v-text="item.name"></div>
        </div>
      </div>
    </div>
  </div> 
</template>

<script>
import Mock from 'mockjs'
import titletop from 'components/title'

export default {
  name: 'seekclass',
  props : [],
  data () {
    return {
      selectItem:0,//选中第一个
      titlename:'分类找药',
      fixedhead:'fixedhead',
      oneclasslist:[],//一级分类
      seclasslist:[]  //二级分类
    }
  },
  components: {
    titletop
  },
  methods : {
      godruglist(id){
          console.log(id);
          this.$router.push({ name: 'druglist', query: { id: id }});
      },
      showseek(list,index){
          this.seclasslist = list;
          this.selectItem = index;
      }
  },
  mounted(){
      let data = Mock.mock({
          "list|10": [
            {'name':'一级分类',"list|1-10": [
              {'name':'二级分类','id|+1': 1}
            ]}
          ]
      });
      this.oneclasslist = data.list;
      this.seclasslist = data.list&&data.list[0].list;
  }
}

</script>

<style lang="scss" scoped>
  .seekclassin{
    display:flex;
    .active{
      background-color:#eeeeee;
    }
    .oneseek{
      width:50%;
    }
    .twoseek{
      width:50%;
    }
  }
</style>
